<template>
    <div>
        讲解生命周期
        <p ref="pp">{{ msg }}</p>
        <button @click="fn">点我获取 msg</button>
        <button @click="changeMsg">点我改 msg</button>
    </div>
</template>

<script>

export default {

    data() {
        return {
        msg:'芜湖起飞'
        };
    },
     methods: {
    fn() {
      console.log(this.msg)
    },
    changeMsg() {
      this.msg = 'Hello World!'
    }
  },
  // 与 data 平级, 写钩子函数
    // 与 data 评级,写钩子函数
    beforeCreate(){
        console.log('beforeCreate',this.msg,this);
    },
    created(){
      // 只有在这个钩子后才可以访问 data 的数据 和methods 的方法
      console.log('created',this.msg,this);
      // 此时还没有渲染 DOM ,所有无法获取 DOM 元素
      console.log(this.$refs.pp);
    },
    beforeMount(){
      console.log('beforeMount',this.$refs.pp);
    },
    mounted(){
      console.log('mounted',this.$refs.pp);
    },
    // 只有在数据发生变化时才会执行
    // 数据都需改了., 只是before 是指 DOM 更新前
    beforeUpdate(){
        console.log('beforeUpdate', this.msg, this.$refs.pp.innerHTML)
    },
    updated(){
        console.log('updated', this.msg, this.$refs.pp.innerHTML)
    },
    beforeDestroy(){
        // 一般用于清除一些全局的定时器之类的东西
        console.log('beforeDestroy');
    },
    destroyed(){
        console.log('destroyed');
    }
};
</script>

<style>

</style>